<template>
  <div class="checkmore">
    <meta name="referrer" content="no-referrer" />
    <div class="header">
      为你推荐
      <div class="back" @click="$router.go(-1)">
        <svg
          t="1668345839039"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2681"
          width="200"
          height="200"
        >
          <path
            d="M532.526499 904.817574L139.506311 511.797385 532.526499 118.777197c12.258185-12.258185 12.432147-32.892131-0.187265-45.51052-12.707416-12.707416-32.995485-12.703323-45.511543-0.187265L75.166957 484.739123c-7.120165 7.120165-10.163477 17.065677-8.990768 26.624381-1.500167 9.755178 1.5104 20.010753 8.990768 27.491121l411.660734 411.660734c12.258185 12.258185 32.892131 12.432147 45.511543-0.187265 12.707416-12.707416 12.7023-32.995485 0.187265-45.51052z"
            p-id="2682"
            fill="#707070"
          ></path>
        </svg>
      </div>
    </div>

    <div class="body">
      <div class="item" v-for="(item, index) in msg" :key="index">
        <div class="imgs">
          <img :src="item.horizontal_cover" alt="" />
        </div>
        <div class="msg">
          <div class="name">
            {{ item.title }}
          </div>
          <div class="bq">
            <div class="item">穿越</div>
            <div class="item">魔幻</div>
            <div class="item">剧情</div>
          </div>
          <div class="zanpin">
            <div class="item">
              <svg
                t="1668346662421"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3652"
                width="200"
                height="200"
              >
                <path
                  d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                  p-id="3653"
                  fill="#8a8a8a"
                ></path></svg
              >82645
            </div>
            <div class="item">
              <svg
                t="1668346741088"
                class="icon"
                viewBox="0 0 1114 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4918"
                width="200"
                height="200"
              >
                <path
                  d="M412.43236215 880.21486555h-7.85199339c-19.62998309-3.92599633-35.33396983-15.70398675-43.18596322-31.40797352l-27.48197645-66.74194336h-62.81594705c-70.66793969 0-129.55789039-58.88994998-129.55788966-129.55789038V271.68538194c0-74.59393674 58.88994998-129.55789039 129.55788966-129.55789039h526.08355351c70.66793969 0 129.55789039 54.96395365 129.55789039 129.55789039v380.82167634c0 70.66793969-58.88994998 129.55789039-129.55789039 129.55789039h-282.6717602l-58.88994997 78.51993306c-7.85199338 11.77798971-23.55598013 19.62998309-43.18596323 19.62998381z m-141.33588011-679.19742403c-39.25996689 0-70.66793969 31.40797353-70.66793967 70.66794042v380.82167635c0 39.25996689 31.40797353 70.66793969 70.66793967 70.66794039h102.07591322l39.25996689 94.22391984 70.66794042-94.22391984h310.15373665c39.25996689 0 70.66793969-31.40797353 70.66793969-70.66794039V271.68538194c0-39.25996689-31.40797353-70.66793969-70.66793969-70.66794042H271.09648204zM346.41018531 337.51125953h374.80181521a30.71001833 30.71001833 0 0 1 0 61.4418473H346.41018531a30.71001833 30.71001833 0 1 1 0-61.4418473z m0.23992193 202.23245021h190.06186059a30.97175162 30.97175162 0 1 1 0 61.89988056H346.67191787a30.97175162 30.97175162 0 1 1 0-61.89988056z"
                  fill="#8a8a8a"
                  p-id="4919"
                ></path></svg
              >5412
            </div>
          </div>
        </div>
        <div class="guanzhu">
          <div class="watch">+关注</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getcheckData } from "../api/checkmore.js";
export default {
  data() {
    return {
      msg: null,
    };
  },
  created() {
    getcheckData({
      style_id: -1,
      area_id: -1,
      is_finish: -1,
      order: 0,
      is_free: -1,
      page_num: 1,
      page_size: 18,
    }).then((data) => {
      console.log(data);
      this.msg = data.data
    });
    // axios.get("https://apis.netstart.cn/mbcomic/ClassPage?style_id=-1&area_id=-1&is_finish=-1&order=0&is_free=-1&page_num=1&page_size=18").then(data=>{
    //     // console.log(data)
    //     // console.log(data.data.data)
    //     this.msg = data.data.data
    //     console.log(this.msg)
    // })
    // // axios({
    //   method: "get",
    //   url: "https://apis.netstart.cn/mbcomic/ClassPage?style_id=-1&area_id=-1&is_finish=-1&order=0&is_free=-1&page_num=1&page_size=18",
    //   data: {
    //     name: "tom",
    //   },
    // })
    //   .then(function (response) {
    //     console.log(response);
    //     console.log(response.data.data)
    //     this.msg = response.data.data
    //     // this.msg = response.data.data
    //     // console.log(this.msg)
    //   })
    //   .catch(function (error) {
    //     console.log("请求失败----->",error);
    //   });
  },
};
</script>

<style lang="scss">
.checkmore .header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
  .back {
    position: absolute;
    top: 3px;
    left: 10px;
    width: 18px;
    height: 18px;
    svg {
      width: 18px;
      height: 18px;
    }
  }
}
.checkmore .body {
  width: 100%;
  .item {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
    .imgs {
      width: 45%;
      img {
        width: 100%;
      }
    }
    .msg {
      flex: 1;
      display: flex;
      flex-direction: column;

      justify-content: space-around;
      .name {
        width: 100%;
        font-size: 16px;
        height: 20px;
        line-height: 20px;
      }
      .bq {
        width: 100%;
        display: flex;
        .item {
          font-size: 12px;
          background-color: #ffffff;
          color: #caccce;
        }
      }
      .zanpin {
        color: #8a8a8a;
        font-size: 10px;
        display: flex;
        svg {
          width: 10px;
          height: 10px;
        }
      }
    }
    .guanzhu {
      width: 15%;
      height: 100%;
      .watch {
        width: 60px;
        height: 20px;
        border-radius: 10px;
        background-color: #fde23d;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
      }
    }
  }
}
</style>